<template>
  <div class="company-business">
    <a-card>
      <h2>公司业务数据分析</h2>
      <a-divider></a-divider>
      <div class="container">
        <draw-business class="left" v-if="list.length" :typeArr="typeArr" :echartData="echartData"></draw-business>
        <div class="right">
          <div class="industry"> 公司所处行业：软件开发服务业</div>
          <div class="title"> 公司项目业务汇总</div>
          <ul class="project-wrp">
            <li><span>项目名称</span><span>服务行业</span><span>项目简介</span></li>
            <li v-for="(item,index) in list" :key="index">
              <span>{{item.projectName}}</span>
              <span> {{item.industry==0?'信息科技':item.industry==1?'大消费':item.industry==2?'先进制造':item.industry==3?'传媒娱乐':item.industry==4?'传统行业':item.industry==5?"地产金融":item.industry==6?"节能环保":'生命健康'}}</span>
              <span>{{item.projectInfo}}</span>
            </li>
          </ul>

        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import { analysis } from "../../service";
import DrawBusiness from "./components/DrawBusiness.vue";
export default defineComponent({
  components: {
    DrawBusiness,
  },
  setup() {
    const list = ref([]);
    let echartData = ref([]);
    let typeArr = ref([]);
    const getList = async () => {
      const res = await analysis.companybusinesslist();

      if (res.data.code == 200) {
        list.value = res.data.data.newList;
        // console.log("list.value", list.value);

        //按属性对obj分类
        function groupBy(objectArray, property) {
          return objectArray.reduce(function (acc, obj) {
            let key = obj[property];
            if (!acc[key]) {
              acc[key] = [];
            }
            acc[key].push(obj);
            return acc;
          }, {});
        }
        let groupedIndustry = groupBy(list.value, "industry");
        console.log("groupedIndustry ", groupedIndustry); //{0: Array(1), 1: Array(1), 4: Array(1), 7: Array(2)}

        //遍历对象 属性

        for (let key in groupedIndustry) {
          console.log("遍历对象 属性", key, groupedIndustry[key].length);
          echartData.value.push(groupedIndustry[key].length);
          if (key == 0) {
            typeArr.value.push("信息科技");
          } else if (key == 1) {
            typeArr.value.push("大消费");
          } else if (key == 2) {
            typeArr.value.push("先进制造");
          } else if (key == 3) {
            typeArr.value.push("传媒娱乐");
          } else if (key == 4) {
            typeArr.value.push("传统行业");
          } else if (key == 5) {
            typeArr.value.push("地产金融");
          } else if (key == 6) {
            typeArr.value.push("节能环保");
          } else {
            typeArr.value.push("生命健康");
          }
        }
        console.log("最终type", typeArr.value); //['信息科技', '大消费', '传统行业', '生命健康']
        console.log("最终data", echartData.value); //[1, 1, 1, 2]
      }
    };
    onMounted(() => {
      getList();
    });
    return {
      list,
      typeArr,
      echartData,
    };
  },
});
</script>

<style lang='less' scoped>
.company-business {
  .container {
    display: flex;
    width: 100%;
    height: 500px;
  }
  .left {
    flex: 1;
  }
  .right {
    flex: 1;
    padding-left: 20px;
    padding-right: 10px;
    .industry {
      font-weight: bold;
      font-size: 24px;
      // text-align: center;
    }
    .title {
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .project-wrp {
      border: 1px solid #f6ffed;
      li {
        display: flex;
        align-items: center;
        height: 40px;
        padding-left: 10px;

        &:nth-child(odd) {
          background: #f6ffed;
        }
        &:first-child {
          font-size: 18px;
          font-weight: bold;
        }
        span {
          flex: 1;
        }
      }
    }
  }
}
</style>